<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/resize.js" ></script>
		<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
		<script type="text/javascript" src="js/common.js" ></script>
		<script>
			$(function(){
				$(".city").click(function(){
					if($(".city-down").is(':hidden')){
						$(".city-down").show();
					}else{
						$(".city-down").hide();
					}
				});
			})
		</script>
	</head>
	<body>
		<div class="index-header">
			<div class="warp">
				<img src="images/logo.png" class="fl logo-img" />
				<div class="city fr">
					<img src="images/weizhi.png" class="fl dingwei" />
					<span>重庆</span>
					<div class="city-down">
						<ul>
							<li><a href="#">上海</a></li>
							<li><a href="#">北京</a></li>
							<li><a href="#">天津</a></li>
							<li><a href="#">广州</a></li>
							<li><a href="#">深圳</a></li>
							<li><a href="#">南京</a></li>
							<li><a href="#">杭州</a></li>
							<li><a href="#">武汉</a></li>
							<li><a href="#">西安</a></li>
							<li><a href="#">成都</a></li>
						</ul>
						<a href="#" class="more">更多城市</a>
					</div>
				</div>
			</div>
		</div>
		<div class="banner">
			<img src="images/banner.png" />
		</div>
		
		<div class="w100 bgwhite">
			<!--搜索-->
			<div class="seachbox">
				<select class="Reselect">
					<option>选择科目</option>
					<option>选择科目</option>
					<option>选择科目</option>
					<option>选择科目</option>
				</select>
				<select class="Reselect">
					<option>教员性别</option>
					<option>选择科目</option>
					<option>选择科目</option>
					<option>选择科目</option>
				</select>
				<select class="Reselect">
					<option>教员身份</option>
					<option>选择科目</option>
					<option>选择科目</option>
					<option>选择科目</option>
				</select>
				<a href="javascript:;" class="seach-btn">查找教员</a>
			</div>
			<!--服务流程-->
			<div class="warp">
				<h2 class="fuwu-title"></h2>
				<ul class="fuwu-list">
					<li>1.在线预约</li>
					<li>2.匹配老师</li>
					<li>3.免费试讲</li>
					<li>4.正式上课</li>
				</ul>
			</div>
		</div>
		<!--快速点击-->
		<div class="warp">
			<ul class="quickClick">
				<li>
					<a href="teacherList.html">
						<img src="images/jiaoyuan.png" class="jiaoyuan-img" />
						<span>在线找教员</span>
					</a>
				</li>
				<li>
					<a href="applyfor.html">
						<img src="images/time.png" class="time-img" />
						<span>快速请家教</span>
					</a>
				</li>
				<li>
					<ul class="quickClick-child">
						<li>
							<a href="xueyuanList.html">
								<img src="images/xueyuan.png" class="xueyuan-img" />
								<span>学员库</span>
							</a>
						</li>
						<li>
							<a href="teacherLogin.html">
								<img src="images/jiaoyuan-1.png" class="jiaoyuan-1-img" />
								<span>教员登录</span>
							</a>
						</li>
						<li>
							<a href="teacherRegister.html">
								<img src="images/jiaoyuanzhuce.png" class="jiaoyuanzhuce-img" />
								<span>教员注册</span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!--课程分类-->
		<div class="w100 bgwhite">
			<h2 class="nomar-tile">课程分类</h2>
			<div class="warp">
				<div class="type-list-one">
					<a href="javascript:;" class="type-one-on" data-id="1">小学课程</a>
					<a href="javascript:;" data-id="2">初中课程</a>
					<a href="javascript:;" data-id="3">高中课程</a>
					<a href="javascript:;" data-id="4">特色课程</a>
				</div>
				<div class="type-list">
					<div class="type-list-two type-list-1">
						<a href="javascript:;" class="type-two-on" data-id="1">小学语文</a>
						<span>/</span>
						<a href="javascript:;" data-id="2">小学数学</a>
						<span>/</span>
						<a href="javascript:;" data-id="3">小学英语</a>
						<span>/</span>
						<a href="javascript:;" data-id="4">小学奥数</a>
					</div>
					<div class="type-list-two type-list-2" style="display: none;">
						<a href="javascript:;" class="type-two-on" data-id="5">初中语文</a>
						<span>/</span>
						<a href="javascript:;" data-id="6">初中数学</a>
						<span>/</span>
						<a href="javascript:;" data-id="7">初中英语</a>
						<span>/</span>
						<a href="javascript:;" data-id="8">初中奥数</a>
					</div>
					<div class="type-list-two type-list-3" style="display: none;">
						<a href="javascript:;" class="type-two-on" data-id="9">高中语文</a>
						<span>/</span>
						<a href="javascript:;" data-id="10">高中数学</a>
						<span>/</span>
						<a href="javascript:;" data-id="11">高中英语</a>
						<span>/</span>
						<a href="javascript:;" data-id="12">高中奥数</a>
					</div>
					<div class="type-list-two  type-list-4" style="display: none;">
						<a href="javascript:;" class="type-two-on" data-id="13">特色语文</a>
						<span>/</span>
						<a href="javascript:;" data-id="14">特色数学</a>
						<span>/</span>
						<a href="javascript:;" data-id="15">特色英语</a>
						<span>/</span>
						<a href="javascript:;" data-id="16">特色奥数</a>
					</div>
				</div>
				<div class="teacher-list">
					<ul class="teacher-list-one teacher-list-one-1">
						<li class="clearfix">
							<div class="teacher-one-img"><img src="images/jiaoyuan-img.jpg"/></div>
							<div class="teacher-one-txt">
								<p class="one-txt-name">张老师</p>
								<p class="one-txt-pro">高中老师 20年教龄</p>
							</div>
							<a href="teacherDetail.html" class="script-icon"></a>
						</li>
						<li class="clearfix">
							<div class="teacher-one-img"><img src="images/jiaoyuan-img.jpg"/></div>
							<div class="teacher-one-txt">
								<p class="one-txt-name">张老师</p>
								<p class="one-txt-pro">高中老师 20年教龄</p>
							</div>
							<a href="teacherDetail.html" class="script-icon"></a>
						</li>
						<li class="clearfix">
							<div class="teacher-one-img"><img src="images/jiaoyuan-img.jpg"/></div>
							<div class="teacher-one-txt">
								<p class="one-txt-name">张老师</p>
								<p class="one-txt-pro">高中老师 20年教龄</p>
							</div>
							<a href="teacherDetail.html" class="script-icon"></a>
						</li>
						<li class="clearfix">
							<div class="teacher-one-img"><img src="images/jiaoyuan-img.jpg"/></div>
							<div class="teacher-one-txt">
								<p class="one-txt-name">张老师</p>
								<p class="one-txt-pro">高中老师 20年教龄</p>
							</div>
							<a href="teacherDetail.html" class="script-icon"></a>
						</li>
						<li class="clearfix">
							<div class="teacher-one-img"><img src="images/jiaoyuan-img.jpg"/></div>
							<div class="teacher-one-txt">
								<p class="one-txt-name">张老师</p>
								<p class="one-txt-pro">高中老师 20年教龄</p>
							</div>
							<a href="teacherDetail.html" class="script-icon"></a>
						</li>
						<li class="clearfix">
							<div class="teacher-one-img"><img src="images/jiaoyuan-img.jpg"/></div>
							<div class="teacher-one-txt">
								<p class="one-txt-name">张老师</p>
								<p class="one-txt-pro">高中老师 20年教龄</p>
							</div>
							<a href="teacherDetail.html" class="script-icon"></a>
						</li>
					</ul>
					<ul class="teacher-list-one teacher-list-one-2" style="display: none;">
						2
					</ul>
					<ul class="teacher-list-one teacher-list-one-3" style="display: none;">
						3
					</ul>
					<ul class="teacher-list-one teacher-list-one-4" style="display: none;">
						4
					</ul>
					<ul class="teacher-list-one teacher-list-one-5" style="display: none;">
						5
					</ul>
					<ul class="teacher-list-one teacher-list-one-6" style="display: none;">
						6
					</ul>
					<ul class="teacher-list-one teacher-list-one-7" style="display: none;">
						7
					</ul>
					<ul class="teacher-list-one teacher-list-one-8" style="display: none;">
						8
					</ul>
					<ul class="teacher-list-one teacher-list-one-9" style="display: none;">
						9
					</ul>
					<ul class="teacher-list-one teacher-list-one-10" style="display: none;">
						10
					</ul>
					<ul class="teacher-list-one teacher-list-one-11" style="display: none;">
						11
					</ul>
					<ul class="teacher-list-one teacher-list-one-12" style="display: none;">
						12
					</ul>
					<ul class="teacher-list-one teacher-list-one-13" style="display: none;">
						13
					</ul>
					<ul class="teacher-list-one teacher-list-one-14" style="display: none;">
						14
					</ul>
					<ul class="teacher-list-one teacher-list-one-15" style="display: none;">
						15
					</ul>
					<ul class="teacher-list-one teacher-list-one-16" style="display: none;">
						16
					</ul>
				</div>
				
				<a href="teacherList.html" class="seeMore">查看更多</a>
				<div class="jzreply">
					<p><span class="fl colorBlue">家长反馈</span><span class="colorgray">/PARENTAL FEEDBACK</span> <a href="parentFeedback.html" class="jzmore">MORE+</a></p>
					<ul class="teacher-list-two">
						<li><img src="images/jiaoyuan-img.jpg"/></li>
						<li><img src="images/jiaoyuan-img.jpg"/></li>
						<li><img src="images/jiaoyuan-img.jpg"/></li>
					</ul>	
				</div>
			</div>
		</div>
		<!--底部-->
		<div class="footer">
			<a href="javascript:;" title="返回顶部" class="up-btn" id="back-to-top"></a>
			<div class="footer-msg">
				<img src="images/qrcode.png" class="fl qrcode" />
				<div class="msg-txt fr">
					<p><a href="" class="colorBlue">触屏版</a>|<a href="">电脑版</a></p>
					<p>copyRight@2017-2018</p>
					<p>版权所有：智必达家教</p>
				</div>
			</div>
			<div class="bottom">
				<ul>
					<li>
						<a href="" class="kf">在线客服</a>
					</li>
					<li>
						<a href="" class="tel">400-0000-0000</a>
					</li>
					<li>
						<a href="applyfor.html" class="jiaoyuan">预约教员</a>
					</li>
				</ul>
			</div>
			
		</div>
		<script>
			$(function(){
				$(".type-list-one a").click(function(){
					var _id=$(this).attr("data-id");
					var thatClass=".type-list-"+_id;
					var childId=4*parseInt(_id)-3;
					$(this).addClass("type-one-on").siblings().removeClass("type-one-on");
					$(".teacher-list").find(".teacher-list-one-"+childId).show().siblings().hide();
					$(".type-list").find(thatClass).show().siblings().hide();
				});
				$(".type-list-two a").click(function(){
					var _id=$(this).attr("data-id");
					var thatClass=".teacher-list-one-"+_id;
					$(".teacher-list").find(thatClass).show().siblings().hide();
					$(this).addClass("type-two-on").siblings().removeClass("type-two-on");
				});
			})
		</script>
	</body>
</html>
